<template>
  <div class="publish-settings-section">
    <div class="section-header">
      <div class="section-indicator"></div>
      <h4>基本设置</h4>
    </div>
    
    <div class="settings-form">
      <!-- 测试名称设置 -->
      <div class="form-item">
        <div class="form-label">测试名称</div>
        <div class="form-input">
          <el-input v-model="formData.title" placeholder="请输入测试名称" style="width: 100%;"></el-input>
        </div>
      </div>

      <div class="form-item">
        <div class="form-label">选择班级</div>
        <div class="form-input">
          <el-select v-model="formData.classId" placeholder="请选择班级" style="width: 100%;">
            <el-option
              v-for="classItem in classList"
              :key="classItem.classId"
              :label="classItem.className"
              :value="classItem.classId">
            </el-option>
          </el-select>
          <div class="tip-text" v-if="classList.length === 0">
            <i class="el-icon-warning"></i>
            暂无可用班级，请先创建班级
          </div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">答题类型</div>
        <div class="form-input type-selector">
          <el-radio-group v-model="formData.answerType">
            <el-radio-button label="课前">课前</el-radio-button>
            <el-radio-button label="课中">课中</el-radio-button>
            <el-radio-button label="课后">课后</el-radio-button>
            <el-radio-button label="测试">测试</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      
      <!-- 时间设置 -->
      <div class="time-setting-panel">
        <div class="time-setting-header">
          <i class="el-icon-time"></i> 时间设置
        </div>
        
        <div class="form-row">
          <div class="form-item">
            <div class="form-label">开始方式</div>
            <div class="form-input">
              <el-radio-group v-model="formData.startMode" @change="handleStartModeChange">
                <el-radio label="immediate">立即开始</el-radio>
                <el-radio label="scheduled">定时开始</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        
        <div class="form-row" v-if="formData.startMode === 'scheduled'">
          <div class="form-item">
            <div class="form-label">
              <i class="el-icon-date"></i>
              开始时间
              <span class="required-mark">*</span>
            </div>
            <div class="form-input">
              <el-date-picker
                v-model="formData.startTime"
                type="datetime"
                placeholder="选择开始时间"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                :picker-options="startTimeOptions"
                @change="handleStartTimeChange">
              </el-date-picker>
              <div class="tip-text" v-if="formData.startTime">
                <i class="el-icon-time"></i>
                学生将在此时间后可以开始答题
              </div>
            </div>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-item">
            <div class="form-label">答题时长</div>
            <div class="form-input duration-input">
              <el-input-number 
                v-model="formData.timeLimit" 
                :min="1" 
                :max="1440" 
                controls-position="right"
                @change="handleTimeLimitChange">
              </el-input-number>
              <span class="duration-unit">分钟</span>
              <el-tooltip content="设置学生可用于答题的总时长" placement="top">
                <i class="el-icon-question help-icon"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
        
        <div class="form-row" v-if="formData.startMode !== 'manual'">
          <div class="form-item">
            <div class="form-label">截止时间</div>
            <div class="form-input">
              <el-date-picker
                v-model="formData.deadline"
                type="datetime"
                placeholder="选择截止时间"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                :picker-options="deadlineOptions"
                :disabled="!formData.startTime && formData.startMode === 'scheduled'"
                class="deadline-picker">
              </el-date-picker>
              <div class="deadline-note" v-if="formData.deadline">
                <i class="el-icon-info"></i>
                截止时间后，学生将无法继续答题
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="step-actions">
      <el-button @click="$emit('prev')" plain>上一步</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublishSettings',
  props: {
    formData: {
      type: Object,
      required: true
    },
    classList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      startTimeOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7; // 不能选择今天之前的日期
        }
      },
      deadlineOptions: {
        disabledDate: (time) => {
          if (!this.formData.startTime) return true;
          const startTime = new Date(this.formData.startTime).getTime();
          return time.getTime() <= startTime; // 不能早于开始时间
        }
      }
    };
  },
  methods: {
    handleStartModeChange() {
      if (this.formData.startMode === 'immediate') {
        // 立即开始，设置开始时间为当前时间
        const now = new Date();
        this.formData.startTime = this.formatDateTime(now);
      } else {
        // 定时开始，清空开始时间
        this.formData.startTime = '';
      }
      this.calculateDeadline();
    },
    
    handleStartTimeChange() {
      this.calculateDeadline();
    },
    
    handleTimeLimitChange() {
      this.calculateDeadline();
    },
    
    calculateDeadline() {
      if (!this.formData.startTime || !this.formData.timeLimit) return;
      
      const startTime = new Date(this.formData.startTime);
      const deadline = new Date(startTime.getTime() + this.formData.timeLimit * 60 * 1000);
      
      this.formData.deadline = this.formatDateTime(deadline);
    },
    
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    
    handleNext() {
      if (!this.formData.classId) {
        this.$message.warning('请选择班级');
        return;
      }
      
      if (this.formData.startMode === 'scheduled' && !this.formData.startTime) {
        this.$message.warning('请设置开始时间');
        return;
      }
      
      this.$emit('next');
    },
    
    validateForm() {
      if (!this.formData.classId) {
        this.$message.warning('请选择班级');
        return false;
      }
      
      if (this.formData.startMode === 'scheduled' && !this.formData.startTime) {
        this.$message.warning('请设置开始时间');
        return false;
      }
      
      if (!this.formData.deadline) {
        this.$message.warning('请设置截止时间');
        return false;
      }
      
      return true;
    }
  },
  
  created() {
    // 初始化默认值
    if (!this.formData.answerType) {
      this.$set(this.formData, 'answerType', '课中');
    }
    
    if (!this.formData.startMode) {
      this.$set(this.formData, 'startMode', 'immediate');
      this.handleStartModeChange();
    }
    
    if (!this.formData.timeLimit) {
      this.$set(this.formData, 'timeLimit', 60);
    }
  }
};
</script>

<style scoped>
.settings-form {
  margin-top: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  font-weight: bold;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.form-label i {
  margin-right: 5px;
  color: #909399;
}

.required-mark {
  color: #f56c6c;
  margin-left: 4px;
}

.tip-text {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.tip-text i {
  margin-right: 5px;
}

.time-setting-panel {
  margin-top: 30px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fafafa;
}

.time-setting-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
  display: flex;
  align-items: center;
}

.time-setting-header i {
  margin-right: 5px;
  color: #409EFF;
}

.duration-input {
  display: flex;
  align-items: center;
}

.duration-input .el-input-number {
  margin-right: 10px;
}

.duration-unit {
  margin: 0 10px;
  color: #606266;
}

.help-icon {
  color: #909399;
  margin-left: 5px;
  cursor: help;
}

.deadline-picker {
  width: 100%;
}

.deadline-note {
  font-size: 12px;
  color: #67C23A;
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.deadline-note i {
  margin-right: 5px;
}

.step-actions {
  margin-top: 30px;
  text-align: right;
}
</style>
